<!--
 * @Author: windys
 * @Description: 评论面板
 * @Date: 2022-03-08 14:56:55
-->
<template>
  <van-action-sheet v-model:show="show" title="评价课程">
    <div class="content">
      <van-rate size="28" v-model="data.level" />
      <div style="margin-top: 20px">
        <van-cell-group inset>
          <van-field
            rows="5"
            autosize
            label="留言"
            type="textarea"
            placeholder="请输入留言"
            label-width="40px"
            clearable
            v-model="data.content"
          />
        </van-cell-group>
      </div>
      <div>
        <van-button
          type="primary"
          round
          block
          size="small"
          style="width: 200px"
          @click="handleOk"
          >提交</van-button
        >
      </div>
    </div>
  </van-action-sheet>
</template>



<script >
import { defineComponent, getCurrentInstance, reactive, ref } from "vue";
import { commentCrouse } from "@/api/crouse";
import { useRoute } from "vue-router";
import { Notify, Toast } from "vant";
export default defineComponent({
  setup() {
    const show = ref(false);
    const instance = getCurrentInstance().appContext.config.globalProperties;

    const route = useRoute();
    const data = reactive({
      courseId: route.query.courseId,
      commentName:instance.$user?instance.$user.nick:null,
      level: 0,
      content: "",
      headUrl:  instance.$user?instance.$user.headUrl:null,
      timeContent:'已观看完'
    });
    const handleOk = async () => {
      if (data.level && data.content) {
        const res = await commentCrouse(data);
        if(typeof res != 'number'){
            show.value =  false
            data.level = 0
            data.content = ''
            Toast.success('评价成功')
        }
      } else {
        Toast.fail("请输入内容和评分");
      }
    };
    return {
      data,
      show,
      handleOk,
    };
  },
});
</script>



<style lang="scss" scoped>
.content {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
  width: 100%;
}
</style>